<template>
	<view class="emain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor,'borderBottom':borderBottom}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 color000"></text></view>
				<view class="color000 font32 mr-2">活动中心</view>
				<text class="iconfont icon-31fanhui1 font34 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view v-if="ActiveList">
			<view v-if="ActiveList.clockActivityList" @click="gotoActivityPage(1)" class="rounded30 position-relative" style="width: 680rpx; height: 345rpx; margin: 45rpx auto 0; overflow: hidden;" v-for="i in ActiveList.clockActivityList" :key="i.id">
				<image :src="i.image" mode="widthFix" style="width: 680rpx;"></image>
				<view class="font-bold position-absolute" style="bottom: 70rpx; left: 30rpx;">{{i.name}}</view>
				<view class="position-absolute font26" style="bottom: 30rpx; left: 30rpx; color: #9D9D9E;">{{i.date}}</view>
			</view>
			<view v-if="!ActiveList.dailyActivityList" class="font-bold font34 ml-4 mt-5 mb-2">天天领福利</view>
			<view v-if="!ActiveList.dailyActivityList" class="d-flex d-flex-wrap">
				<view class="rounded30 position-relative" v-for="i in ActiveList.dailyActivityList" :key="i.id" style="width: 49%;">
					<image :src="i.image" mode="widthFix" style="width: 376rpx;"></image>
					<view class="font-bold position-absolute" style="bottom: 72rpx; left: 40rpx;">{{i.name}}</view>
					<view class="position-absolute font20" style="bottom: 45rpx; left: 40rpx; color: #9D9D9E;">{{i.date}}</view>
				</view>
			</view>
			<view v-if="!ActiveList.openActivityList" class="font-bold font34 ml-4 mt-5 mb-2">开黑有好礼</view>
			<view v-if="!ActiveList.openActivityList" class="d-flex d-flex-wrap">
				<view class="rounded30 position-relative" v-for="i in ActiveList.openActivityList" :key="i.id" style="width: 49%;">
					<image :src="i.image" mode="widthFix" style="width: 376rpx;"></image>
					<view class="font-bold position-absolute" style="bottom: 72rpx; left: 40rpx;">{{i.name}}</view>
					<view class="position-absolute font20" style="bottom: 45rpx; left: 40rpx; color: #9D9D9E;">{{i.date}}</view>
				</view>
			</view>
		</view>
		<view v-else style="width: 100%; margin-top: 23rpx;"  >
		<text class="position-relative font-bold font30 d-flex" style="  justify-content: center;align-items: center;top: 405rpx;">暂时还没有活动</text>
		<image class="position-relative" style="top: -73rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
		</view>
		
		<!-- 首充活动 -->
		<view class="firstChangeBox position-fixed top-0 right-0 left-0 bottom-0 z-index-1000" style="background: rgba(0, 0, 0, .6);" :style="{display: firstChangeDisplay}">
			<view class="firstChange firstChangeSty" v-if="!isPurchase">
				<view class="position-absolute colorfff font-bold w-100 text-center font26" style="top: 149rpx;">前2笔充值附赠开宝盒机会</view>
				<view @click="openRealDesc" class="position-absolute colorfff font22 mr-4 left-0" style="top: 176rpx; margin-left: 490rpx; width: 100rpx; opacity: 0;">规则说明</view>
				<view class="position-absolute d-flex colorfff font-bold font32" style="top: 215rpx; width: 535rpx; margin-left: 52rpx;">
					<view @click="changeChangeIndex(0)" :class="['text-center',firstChangeIndex ===0? 'currentChange' : '']" style="height: 50rpx; line-height: 50rpx; width: 32%;">12元</view>
					<view @click="changeChangeIndex(1)" :class="['text-center',firstChangeIndex ===1? 'currentChange' : '']" style="height: 50rpx; line-height: 50rpx; width: 32%;">68元</view>
					<view @click="changeChangeIndex(2)" :class="['text-center',firstChangeIndex ===2? 'currentChange' : '']" style="height: 50rpx; line-height: 50rpx; width: 32%;">188元</view>
				</view>
				<view class="position-relative d-flex" style="top: 340rpx; margin-left: 52rpx;" v-if="showRechargeRewards">
					<view class="firstChangeItemSty position-relative">
						<image class="ml-3 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png" style="width: 60rpx; height: 60rpx;"></image>
						<view class="position-absolute colorfff font20 text-center" style="bottom: 2rpx; width: 100%;">{{RechargeRewards.coinPackageVo.name}}</view>
					</view>
					<view v-for="i in RechargeRewards.rewardList" :key="i.id">
						<view class="firstChangeItemSty position-relative" v-if="i.rewardType !== 4">
							<image v-if="i.rewardType===2 || i.rewardType===14" :src="i.rewardIcon" :class="[i.rewardType===14? 'ml-2 mt-2' : '']" :style="[{width: i.rewardType===2? '120rpx' : '80rpx'},{height: i.rewardType===2? '120rpx' : '80rpx'}]"></image>
							<image v-if="i.rewardType===6" class="ml-3 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218141435.png" style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===7" class="ml-3 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218150043.png" style="width: 60rpx; height: 60rpx;"></image>
							<view v-if="i.rewardType===2 || i.rewardType===14" class="triangle colorfff position-absolute font22">×{{i.rewardCount}}</view>
							<view class="position-absolute colorfff font20 text-center" style="bottom: 2rpx; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">{{i.rewardName}}</view>
						</view>
					</view>
				</view>
				<view class="position-absolute colorfff d-flex d-flex-bottom" style="bottom: 505rpx; left: 52rpx;">
					<view class="font28 font-bold" style="transform: skewX(-10deg);">附赠{{CouponsNum}}张宝盒券</view>
					<view class="font22 font-bold">(开宝盒几率得以下奖励)</view>
				</view>
				<view class="position-absolute" style="bottom: 150rpx; left: 50%; transform: translateX(-50%); width: 545rpx; height: 360rpx; overflow: scroll;">
					<view class="d-flex d-flex-wrap" style="width: 615rpx; margin-left: 12rpx;">
						<view class="firstChangeItemSty2 position-relative" v-for="i in RechargeRewards.attachRewardList" :key="i.id">
							<image v-if="i.rewardType===2 || i.rewardType===14" :src="i.rewardIcon" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<image v-if="i.rewardType===6" class="ml-4 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218141435.png" style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===7" class="ml-4 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218150043.png" style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===3" class="ml-4 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png" style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===9" class="ml-4 mt-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219161950.png" style="width: 60rpx; height: 60rpx;"></image>
							<view v-if="i.rewardType===2 || i.rewardType===9" class="triangle colorfff position-absolute font22">×{{i.rewardCount}}</view>
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">{{i.rewardName}}
						</view>
						</view>
					</view>
					</view>
				<view class="position-absolute colorfff text-center font22 w-100" style="bottom: 115rpx;">本次活动由官方举办，请理性消费，适当娱乐</view>
				<view class="position-absolute font40 pb-3" style="bottom: 6rpx; right: 240rpx;" @click="confirm">
					<view class="colorfff font-bold d-flex-btn w-100" style="text-shadow: 0px 3px 2px #cf1b61; letter-spacing: 2px;">{{PayMount}}元抢购</view>
				</view>
				<view @click="closeFirstChangePopup" class="position-absolute" style="left: 50%; transform: translateX(-50%); bottom: -90rpx;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-white.png" style="width: 50rpx; height: 50rpx;"></image>
				</view>
			</view>
			<view class="PurchaseSussessSty" v-else>
				<view class="position-absolute colorfff d-flex d-flex-bottom" style="top: 296rpx; left: 52rpx;">
					<view class="font28 font-bold" style="transform: skewX(-10deg);">礼包奖励</view>
				</view>
				<view class="position-absolute d-flex" style="top: 339rpx; margin-left: 52rpx;">
					<view class="firstChangeItemSty position-relative">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029173611-25b58df8-813a-4fb4-b515-fdb83ce22996.png" style="width: 120rpx; height: 120rpx;"></image>
						<view class="triangle colorfff position-absolute font22">×1</view>	
						<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
					</view>
				</view>
				<view class="position-absolute colorfff d-flex d-flex-bottom" style="top: 530rpx; left: 52rpx;">
					<view class="font28 font-bold" style="transform: skewX(-10deg);">夺宝奖励</view>
				</view>
				<view class="position-absolute" style="top: 560rpx; left: 50%; transform: translateX(-50%); width: 545rpx; height: 360rpx; overflow: scroll;">
					<view class="d-flex d-flex-wrap" style="width: 615rpx; margin-left: 12rpx;">
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151704-d3a541a5-eebd-40a0-895b-40e0f5e85580.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029172752-6ba225ec-0b0e-4625-a44b-e67581d0e0e7.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029173325-66c97884-28cd-4028-9070-55b5b7d88967.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029172926-c465da5c-7b04-4f6c-ab16-43b7141c8181.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151615-f6311967-94d7-499d-b17a-6eb18525ee81.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151940-cc749d47-fde2-4c82-ba24-e660e71fbbfd.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
						<view class="firstChangeItemSty2 position-relative">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151704-d3a541a5-eebd-40a0-895b-40e0f5e85580.png" style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<view class="triangle colorfff position-absolute font22">×1</view>	
							<view class="position-absolute colorfff font22 text-center" style="bottom: 2rpx; width: 100%;">礼包奖励</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="RealDescDisplay" class="position-fixed top-0 left-0 right-0 bottom-0" style="background: rgba(0, 0, 0, .6); z-index: 1001;">
			<view class="RealDesc position-relative rounded15">
				<view class="d-flex mb-2 d-flex-middle">
					<view class="colorfff font30 text-center mt-2" style="flex: 1; margin-left: 65rpx;">规则说明</view>
					<view class="mr-2 mt-2" @click="closeRealDesc">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-white.png" style="width: 45rpx; height: 45rpx;"></image>
					</view>
				</view>
				<view class="font24 px-2 pb-2" style="color: #f9f6fe; overflow: scroll; height: 630rpx;">
					<view class="mb-1" v-for="i in RealDescList" :key="i.id">{{i}}</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="purchasePopup" background-color="#fff" border-radius="10px 10px 0 0" style="z-index: 999999; position: relative;">
			<radio-group class="PayOptions d-flex-between pt-2" v-for="(item, index) in PayList" :key="item.id" @change="ChangePayOpt(index)">
			  <label class="d-flex d-flex-middle d-flex-between">
			    <view class="icon">
			      <image :src="item.icon"></image>
			    </view>
			    <view class="option mr-1" style="margin-bottom: 4rpx;">{{item.name}}</view>
			    <view v-if="item.desc" class="font22 px-3 rounded10" style="color: #FF9645; background: #f9e7c9; margin-bottom: 2px;">{{item.desc}}</view>
			  </label>
			  <radio :value="index" :checked="item.checked" style="transform:scale(0.6);"></radio>
			</radio-group>
			<view class="btn ml-2 colorfff linerbg" style="width: 75%;" @click="purchase">立即以{{PayMount}}元抢购</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	import { PayApi } from "../../http/PayApi";
	import { FirstChangeApi } from "../../http/firstChange";
	import { ActiveCenterApi } from "../../http/ActiveCenter";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				borderBottom: '1px solid none',
				ActiveList: {},
				RechargeRewards: [],
				isPurchase: false,
				firstChangeIndex: 0,
				CouponsNum: 1,
				PayMount: null,
				showRechargeRewards: false,
				firstChangeDisplay: 'none',
				RealDescDisplay: false,
				WxpayParams: {},
				orderStr: null,
				payMethod: 3,
				payType: 2,
				PayList: [
					{
						id: 3,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241115141319.png',
						name: '支付宝',
						desc: '推荐',
						value: 'Alipay',
						checked: true
					},
					{
						id: 2,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/Pay-Wechat.png',
						name: '微信',
						desc: '',
						value: 'Wechat',
						checked: false
					}
				]
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 16) {
				this.bgcolor = '#ffffff'
				this.borderBottom = '1px solid rgba(204,204,204,.4)'
			}else{
				this.bgcolor = 'transparent'
				this.borderBottom = 'none'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			async getActiveList() {
				let res = await ActiveCenterApi.ActiveList()
				this.ActiveList = res
			},
			gotoActivityPage(type) {
				if(type === 1) { // clockActivity
					if(this.ActiveList.clockActivityList[0].name == '新人首充活动') {
						this.GetChangeData()
						this.firstChangeDisplay = 'block'
					}
				}
			},
			changeChangeIndex(ctype) {
				this.firstChangeIndex = ctype
				this.GetChangeData()
			},
			// 获取首充数据
			async GetChangeData(){
				// #ifdef APP
				const pages = getCurrentPages();  
				const page = pages[pages.length - 1];  
				const currentWebview = page.$getAppWebview();
				currentWebview.setStyle({  
					pullToRefresh: {  
						support: false
					}
				});  
				// #endif
				let params = {
					type: 1,
					state: 1
				}
				let res = await FirstChangeApi.GetFirstChangeData(params);
				this.RechargeRewards = res.firstRechargeRewardVoList[this.firstChangeIndex]
				this.RechargeRewards.rewardList.forEach(i => {
					if(i.rewardType === 4) {
						this.CouponsNum = i.rewardCount
					}
				})
				this.PayMount = this.RechargeRewards.coinPackageVo.price
				this.RealDescList = res.description.split("<br/>");
				this.showRechargeRewards = true
			},
			// 查询资源id
			async GetResourceId() {
				let params = {
					type: 1,
					state: 1
				}
				let res = await FirstChangeApi.GetFirstChangeData(params);
				let IdList = ""
				res.firstRechargeRewardVoList.forEach((item, idx) => {
					if(idx == 0) {
						IdList = IdList + item.coinPackageVo.id
					} else {
						IdList = IdList + ',' + item.coinPackageVo.id
					}
				})
				return IdList
			},
			// 查询首充的订单数量
			async QueryFirstChangeOrder(idList) {
				let params = {
					pageIndex: 1,
					pageSize: 1,
					resourceType: 3,
					resourceIdList: idList,
					createUid: this.$store.state.user.uid
				}
				let res = await FirstChangeApi.queryOrder(params);
				return res.records.length
			},
			// 关闭首充弹窗并启动下拉刷新
			closeFirstChangePopup() {
				this.firstChangeDisplay = 'none'
				this.isShowFirstChange = false
				// #ifdef APP
					const pages = getCurrentPages();
					const page = pages[pages.length - 1];  
					const currentWebview = page.$getAppWebview();
					currentWebview.setStyle({  
						pullToRefresh: {  
							support: true
						}
					}); 
				// #endif
			},
			openRealDesc() {
				this.RealDescDisplay = true
			},
			closeRealDesc() {
				this.RealDescDisplay = false
			},
			confirm() {
				// this.QueryFirstChangeOrder().then(result => {
				// 	if(!result) {
				// 		this.OpenpurchasePopup()
				// 	} else {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			position: "bottom",
				// 			title: '您已经首充过了哦~',
				// 			duration: 1500
				// 		})
				// 	}
				// })
				// 通过接口查资源ID，然后通过查询到的资源ID查订单，有订单就说明首充过，不给展示
				this.GetResourceId().then(resoult => {
					console.log(resoult);
					this.QueryFirstChangeOrder(resoult).then(Num => {
						console.log(Num);
						if(!Num) {
							this.OpenpurchasePopup()
						} else {
							uni.showToast({
								icon: 'none',
								position: "bottom",
								title: '您已经首充过了哦~',
								duration: 1500
							})
						}
					})
				})
			},
			OpenpurchasePopup(item) {
				this.$refs.purchasePopup.open('bottom')
			},
			ChangePayOpt(dex) {
				this.PayList[dex].checked = true;
				this.payMethod = this.PayList[dex].id
				if(this.payMethod === 3) {
					this.payType = 2
				}
				if(this.payMethod === 2) {
					this.payType = 2
				}
				// 将其他选项设置为未选中
				this.PayList.forEach((i, index) => {
					if (dex !== index) {
						this.PayList[index].checked = false;
					}
				});
			},
			// 首充
			purchase() {
				let params = {
					id: this.RechargeRewards.coinPackageVo.id,
					sourceType: null
				}
				// 获取设备类型
				let systemInfo = uni.getSystemInfoSync();
				params.sourceType = systemInfo.osName==='ios'? 2 : 1
				
				this.CreateOrder(params)
			},
			// 创建订单
			async CreateOrder(params) {
				let res = await PayApi.DabiPackage(params);
				this.Pay(res.orderNo)
			},
			// 支付
			async Pay(orderNo) {
				let params = {
					orderNo: orderNo,
					payMethod: this.payMethod,
					payType: this.payType
				}
				const res = await PayApi.Pay(params)
				// 支付宝支付
				if(this.payMethod === 3) {
					this.orderStr = res.params.orderStr
					this.payByAlipay()
					return
				}
				// 微信支付
				if(this.payMethod === 2) {
					this.WxpayParams = {}
					this.WxpayParams = res.params
					console.log(res);
					this.payByWxpay();
					return
				}
				if(params.payType == 1){
					console.log(res.paySuccess);
					if(res.paySuccess){
						uni.showToast({
						    title: '购买成功',
						    icon: 'none',
							position:'bottom',
						    duration: 1500
						});
					}
					this.$refs.purchasePopup.close()
				}
			},
			// 微信支付
			payByWxpay() {
				uni.requestPayment({
					"provider": "wxpay", // 微信支付
					"orderInfo": {
					"appid": this.WxpayParams.appid,
					"timestamp":this.WxpayParams.timestamp,
					"noncestr": this.WxpayParams.noncestr,
					"package": "Sign=WXPay", 
					"partnerid": this.WxpayParams.partnerId,
					"prepayid": this.WxpayParams.prepayId, 
					"sign": this.WxpayParams.sign
					},
					success: (res) => {
						console.log('支付成功', res);
						// 支付成功的处理逻辑
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1500
						});
						this.$refs.purchasePopup.close()
						uni.showModal({
							title: '小嗒提醒您',
							content: '您有'+this.CouponsNum+'张宝盒券，是否需要跳转至抽奖区？',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pagesApp/raffle/raffle'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
					fail: (err) => {
						console.log('支付失败，错误信息：', err);
						if (err.errCode === 'xxx') { 
							// 可以根据不同的 errCode 进行不同的处理，这里的 xxx 是具体的错误码，例如用户取消支付的错误码
							console.log('用户取消支付');
						} else if (err.errCode === 'yyy') { 
							// 另一种错误码 yyy 的处理
							console.log('签名错误，请联系客服');
						} else {
							console.log('其他支付错误，请重试或联系客服');
						}
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
						this.$refs.purchasePopup.close()
					}
				});
			},
			// 支付宝支付
			payByAlipay() {
				const orderStr = this.orderStr;
				if (!orderStr) {
					console.error('订单字符串为空，无法进行支付');
					return;
				}
				// 调用 uni.requestPayment 方法
				uni.requestPayment({
					provider: 'alipay', // 指定支付提供商为支付宝
					orderInfo: orderStr, // 订单信息
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1000 // 显示持续时间
						});
						this.$refs.purchasePopup.close()
						uni.showModal({
							title: '小嗒提醒您',
							content: '您有'+this.CouponsNum+'张宝盒券，是否需要跳转至抽奖区？',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
					fail: (err) => {
						console.error('支付失败:', err);
					    uni.showToast({
						   title: '支付失败',
						   icon: 'none',
						   position: 'bottom',
						   duration: 1000 // 显示持续时间
						});
						this.$refs.purchasePopup.close()
					}
				});
			}
		},
		mounted() {
			this.getActiveList()
		}
	}
</script>

<style scoped>
.emain{
	background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%92%99%E7%89%88%E7%BB%84%201.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
	position: relative;
}
/* 首充样式 */
.firstChangeSty {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 620rpx;
	height: 1070rpx;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChange.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.firstChangeItemSty {
	width: 120rpx;
	height: 150rpx;
	margin-right: 12rpx;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChangeItem.png);
	background-size: 100% 100%;
}
.firstChangeItemSty2 {
	width: 140rpx;
	height: 140rpx;
	margin-top: 20rpx;
	margin-right: 12rpx;
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChangeItem.png);
	background-size: 100% 100%;
}
.triangle {
	top: 0;
	left: 0;
	width: 30rpx;
	height: 30rpx;
	background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E7%89%871.png');
	background-size: 100% 100%;
}
.RealDesc {
	width: 610rpx;
	height: 750rpx;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(180deg, #ba68fb 0%, #8548f3 40%, #8548f3 69%, #ba68fb 100%);
}
.z-index-1000 {
	z-index: 1000;
}
.w30 {
	width: 30%;
}
.currentChange {
	background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0211115733.png);
	background-size: 100% 100%;
}
.PayOptions {
	width: 680rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-top: 30rpx;
}
.PayOptions .option {
	color: #231815;
	font-size: 28rpx;
}
.PayOptions .icon {
	margin-right: 26rpx;
}
.PayOptions .icon image {
	width: 64rpx;
	height: 64rpx;
}
.btn {
	margin: 40rpx auto 20rpx;
	text-align: center;
	font-size: 30rpx;
	height: 87rpx;
	line-height: 87rpx;
	border-radius: 50rpx;
}
</style>